<div class="sticky-section left-sticky-section" id="tool-section">
  <div class="sticky-section-wrap">
    <div class="vertical-centerer">
      <div class="pen-size-container size-picker-container" title="Pen size<br/>from 1 to 4 pixels" rel="tooltip" data-placement="top">
        <div class="pen-size-option size-picker-option" data-size="1"></div>
        <div class="pen-size-option size-picker-option" data-size="2"></div>
        <div class="pen-size-option size-picker-option" data-size="3"></div>
        <div class="pen-size-option size-picker-option" data-size="4"></div>
      </div>
      <ul id="tools-container" class="tools-wrapper">
        <!-- Drawing tools will be inserted here -->
      </ul>
      <div class="palette-wrapper">
        <div
          class="tool-icon tool-color-picker"
          data-initial-title="Primary - left mouse button"
          rel="tooltip"
          data-placement="right"
        >
          <input id="color-picker" class="color" type="text"/>
        </div>
        <div
          class="tool-icon tool-color-picker"
          data-initial-title="Secondary - right mouse button"
          rel="tooltip"
          data-placement="right"
        >
          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
        </div>
        <div
          class="swap-colors-button icon-common-swapcolors-arrow-grey"
          title="Swap colors (X)"
          rel="tooltip"
          data-placement="right"
        ></div>
      </div>
    </div>
  </div>

  <!-- Templates -->

  <!-- Drawing tool icon-button -->
  <script type="text/template" id="drawingTool-item-template">
    <li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
  </script>
</div>
